<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info" :class="{ padding0: operateType === 0 }">
      <!-- <el-form v-if="operateType" ref="queryForm" :inline="true" :model="queryForm">
        <el-form-item label="模板编号" prop="templateCode">
          <el-input
            v-model="queryForm.templateCode"
            placeholder="模板编号"
            @keyup.enter.native="onQuery"
          />
        </el-form-item>
        <el-form-item label="模板名称" prop="templateName">
          <el-input
            v-model="queryForm.templateName"
            placeholder="模板名称"
            @keyup.enter.native="onQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button @click="cancelForm">清空</el-button>
        </el-form-item>
      </el-form>-->

      <div v-if="operateType" class="base-content-operate">
        <el-button icon="el-icon-plus" type="primary" @click="onNew"
          >新增</el-button
        >
      </div>

      <el-table
        class="filter unsetborder"
        :class="{ 'show-filter': showFilterRow }"
        :data="list"
        element-loading-text="Loading"
        fit
        height="250"
        highlight-current-row
      >
        <el-table-column align="center">
          <template #header>
            <div class="filter-icon" title="筛选">
              <SvgIcon
                class-name="filter"
                icon-class="filter"
                @click="filterIconClick"
              />
            </div>
          </template>
          <el-table-column width="50"></el-table-column>
        </el-table-column>
        <el-table-column label="序号" align="center">
          <el-table-column width="100" align="center">
            <template v-slot="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="记录编号">
          <el-table-column prop="templateCode">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.templateCode"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="模板名称">
          <el-table-column prop="templateName">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.templateName"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>
        <!-- <el-table-column label="样品类别">
          <el-table-column prop="sampleCategoryName">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.sampleCategoryName"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column> -->
        <el-table-column label="检测项目">
          <el-table-column prop="detectionItemName">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.detectionItemName"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="行业领域">
          <el-table-column prop="industry">
            <template #header>
              <el-input
                v-if="showFilterRow"
                v-model="queryForm.industry"
                @keyup.enter.native="onQuery"
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="操作">
          <el-table-column>
            <template #header>
              <div v-if="showFilterRow" class="search-operate">
                <el-link type="primary" @click="onQuery">搜索</el-link>
                <el-link @click="cancelForm">清空</el-link>
              </div>
            </template>
            <template v-slot="scope">
              <div class="base-table-operation">
                <el-link
                  size="mini"
                  type="primary"
                  @click="handleEdit(scope.row, true)"
                  >查看</el-link
                >
                <el-link
                  v-if="!operateType"
                  size="mini"
                  type="primary"
                  @click="handleCite(scope.row)"
                  >引用</el-link
                >
                <el-link
                  v-if="operateType"
                  size="mini"
                  type="primary"
                  @click="handleEdit(scope.row)"
                  >编辑</el-link
                >
                <el-link
                  v-if="operateType"
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row)"
                  >删除</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>

      <BasePagination
        :total="pagination.total"
        :current-page="pagination.pageIndex"
        :page-count="pagination.total"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>
    <div v-if="!operateType">
      <ExperimentTemplateEditForm
        ref="ExperimentTemplateEditForm"
        :readonly="readonly"
        :dialog-form-visible2.sync="dialogFormVisible"
      />
    </div>
    <div>
      <ExperimentTemplateEdit
        ref="ExperimentTemplateEdit"
        :edit-id="editId"
        :readonly="readonly"
        :dialog-form-visible.sync="dialogFormVisible"
      />
    </div>
  </div>
</template>

<script>
import { deleteRecord, getList } from "../../../api/Eln/ExperimentTemplate.js";
import ExperimentTemplateEdit from "./ExperimentTemplateEdit.vue";
import ExperimentTemplateEditForm from "./ExperimentTemplateEditForm.vue";

export default {
  name: "ExperimentTemplateList",
  components: { ExperimentTemplateEdit, ExperimentTemplateEditForm },
  props: {
    // 0 当成组件引用  1 非组件使用
    operateType: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      loading: true,
      showFilterRow: false,
      list: [],
      dialogFormVisible: false,
      readonly: false,
      editId: "",
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
      queryForm: {
        industry: undefined,
        templateCode: undefined,
        templateName: undefined,
        sampleCategoryName: undefined,
        detectionItemName: undefined,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    getList() {
      this.loading = true;
      getList(this.queryForm, this.pagination)
        .then((res) => {
          this.list = res.data.dataList ? res.data.dataList : [];
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    onNew() {
      this.readonly = false;
      this.editId = "";
      this.dialogFormVisible = true;
    },
    handleDelete(rowData) {
      this.Helper.deleteConfirm(() => {
        this.loading = true;
        deleteRecord({ id: rowData.id })
          .then((res) => {
            this.getList();
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
    handleEdit(rowData, readonly) {
      if (!this.operateType) {
        this.$refs.ExperimentTemplateEditForm.pageViewMode = "preview";
      }
      this.editId = rowData.id;
      this.readonly = !!readonly;
      this.dialogFormVisible = true;
    },
    handleCite(val) {
      const _this = this;
      // 浏览器打开新标签
      const routeUrl = this.$router.resolve({
        path: "/ExperimentTemplateCite",
        query: {
          id: val.id,
          state: false,
        },
      });
      const newTab = window.open(routeUrl.href, "_blank");
      // 监听新标签页的关闭
      newTab.addEventListener("beforeunload", () => {
        _this.getList();
      });
    },
    filterIconClick() {
      this.showFilterRow = !this.showFilterRow;
      !this.showFilterRow && this.cancelForm();
    },
    onQuery() {
      this.pagination.pageIndex = 1;
      this.getList();
    },
    cancelForm() {
      this.queryForm = this.$options.data().queryForm;
      // this.pagination.pageIndex = 1;
      // this.getList();
    },
  },
};
</script>
<style lang="scss">
.padding0 {
  padding: 0 !important;
}
</style>
